<template>
  <el-drawer v-model="addDrawer" size="45%" :show-close="false" @opened="openDrawer"
    @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{typeName}}</span></h2>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="140px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省">
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县">
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="台站编码" prop="id">
            <el-input v-model="form.id" placeholder="请输入台站编码" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="所在城市" prop="city" style="width: 100%">
            <el-input v-model="form.city" placeholder="请输入所在城市" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="台站名称" prop="stationName" style="width: 100%">
            <el-input v-model="form.stationName" placeholder="请输入台站名称" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="台站类型" prop="stationType" style="width: 100%">
            <el-input v-model="form.stationType" placeholder="请输入台站类型" :autosize="{ minRows: 3, maxRows: 6 }"
              type="textarea" show-word-limit maxlength="100" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="台站经度" prop="stationLongitude">
            <el-input v-model="form.stationLongitude" placeholder="请输入台站经度" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="台站纬度" prop="stationLatitude">
            <el-input v-model="form.stationLatitude" placeholder="请输入台站纬度" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="台站海拔高度[米]" prop="elevation">
            <el-input v-model="form.elevation" placeholder="请输入台站海拔高度[米]" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="台基岩性" prop="lithlogy" style="width:100%">
            <el-input v-model="form.lithlogy" placeholder="请输入台基岩性" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="仪器类型" prop="instrument" style="width:100%">
            <el-input v-model="form.instrument" placeholder="请输入仪器类型" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="仪器南北响应灵敏度 [count*s/μm]" prop="sensitivityNs">
            <el-input v-model="form.sensitivityNs" placeholder="请输入仪器南北响应灵敏度 [count*s/μm]" clearable
              maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="仪器东西响应灵敏度 [count*s/μm]" prop="sensitivityEw">
            <el-input v-model="form.sensitivityEw" placeholder="请输入仪器东西响应灵敏度 [count*s/μm]" clearable
              maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="仪器垂直响应灵敏度 [count*s/μm]" prop="sensitivityV">
            <el-input v-model="form.sensitivityV" placeholder="请输入仪器垂直响应灵敏度 [count*s/μm]" clearable
              maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="测定日期" prop="testTime">
            <el-input v-model="form.testTime" placeholder="请输入测定日期" clearable maxlength="8" />
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="起始时间" prop="startTime">
            <el-input v-model="form.startTime" placeholder="请输入起始时间" clearable maxlength="8" />
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useSpatialData from '@/hooks/useSpatialData'
import { eightDouble, fourInt } from '@/utils/validate'
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, isShowSave } = useSpatialData()
const formRules = {
  id: [{ required: true, message: '请填写台站编码！', trigger: 'blur' }],
  stationType: [{ required: true, message: '请填写台站类型！', trigger: 'blur' }],
  stationLongitude: [eightDouble],
  stationLatitude: [eightDouble],
  elevation: [eightDouble],
  sensitivityNs: [fourInt],
  sensitivityEw: [fourInt],
  sensitivityV: [fourInt]
}
</script>
<style scoped></style>